<template>
  <div class="risk-management-page">
    <div class="page-header">
      <h2>风险管理与控制</h2>
      <div class="header-actions">
        <el-button type="primary" icon="Plus" @click="showRiskDialog = true">新增风险</el-button>
        <el-button type="danger" icon="Warning">风险预警</el-button>
        <el-button icon="Download">导出报告</el-button>
      </div>
    </div>

    <!-- 风险概览 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8f4ff">
            <el-icon color="#409eff" :size="24"><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalRisks }}</div>
            <div class="stat-label">风险总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff0f0">
            <el-icon color="#ff4d4f" :size="24"><Close /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.criticalRisks }}</div>
            <div class="stat-label">高风险</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff5e8">
            <el-icon color="#fa8c16" :size="24"><InfoFilled /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.mediumRisks }}</div>
            <div class="stat-label">中风险</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8fff3">
            <el-icon color="#52c41a" :size="24"><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.controlledRisks }}</div>
            <div class="stat-label">已控制</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主内容 -->
    <el-card class="main-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 风险清单 -->
        <el-tab-pane label="风险清单" name="list">
          <el-form :inline="true" :model="filterForm" class="filter-form">
            <el-form-item label="风险类别">
              <el-select v-model="filterForm.category" placeholder="请选择类别" clearable>
                <el-option label="财务风险" value="financial" />
                <el-option label="运营风险" value="operational" />
                <el-option label="市场风险" value="market" />
                <el-option label="合规风险" value="compliance" />
                <el-option label="技术风险" value="technical" />
              </el-select>
            </el-form-item>
            <el-form-item label="风险等级">
              <el-select v-model="filterForm.level" placeholder="请选择等级" clearable>
                <el-option label="高风险" value="high" />
                <el-option label="中风险" value="medium" />
                <el-option label="低风险" value="low" />
              </el-select>
            </el-form-item>
            <el-form-item label="风险状态">
              <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
                <el-option label="识别" value="identified" />
                <el-option label="评估中" value="assessing" />
                <el-option label="控制中" value="controlling" />
                <el-option label="已控制" value="controlled" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
              <el-button icon="Refresh" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="riskList" stripe>
            <el-table-column prop="riskNo" label="风险编号" width="150" />
            <el-table-column prop="riskName" label="风险名称" width="200" />
            <el-table-column prop="category" label="风险类别" width="120">
              <template #default="{ row }">
                <el-tag>{{ getCategoryText(row.category) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="level" label="风险等级" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getLevelType(row.level)" size="large">{{ getLevelText(row.level) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="probability" label="发生概率" width="100" align="center">
              <template #default="{ row }">
                {{ row.probability }}%
              </template>
            </el-table-column>
            <el-table-column prop="impact" label="影响程度" width="120" align="center">
              <template #default="{ row }">
                <el-rate v-model="row.impact" disabled />
              </template>
            </el-table-column>
            <el-table-column prop="riskScore" label="风险值" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getScoreType(row.riskScore)">{{ row.riskScore }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="owner" label="负责人" width="100" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="280" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewDetail(row)">详情</el-button>
                <el-button link type="success" @click="assess(row)">评估</el-button>
                <el-button link type="warning" @click="control(row)">控制</el-button>
                <el-button link type="info" @click="monitor(row)">监控</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 风险评估 -->
        <el-tab-pane label="风险评估" name="assessment">
          <el-card>
            <template #header>
              <span>风险矩阵分析</span>
            </template>
            <div class="risk-matrix">
              <div class="matrix-container">
                <div class="matrix-header">
                  <div class="matrix-title">影响程度 →</div>
                </div>
                <div class="matrix-body">
                  <div class="matrix-y-axis">
                    <div>发生概率 ↑</div>
                  </div>
                  <div class="matrix-grid">
                    <div class="matrix-row" v-for="i in 5" :key="'row-' + i">
                      <div
                        class="matrix-cell"
                        v-for="j in 5"
                        :key="'cell-' + i + '-' + j"
                        :class="getRiskMatrixClass(i, j)"
                      >
                        <div class="cell-content">
                          <div class="cell-score">{{ (6 - i) * j }}</div>
                          <div class="cell-count">{{ getRiskCount(i, j) }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="matrix-legend">
                <div class="legend-item high">
                  <span class="legend-color"></span>
                  <span>高风险（≥15）</span>
                </div>
                <div class="legend-item medium">
                  <span class="legend-color"></span>
                  <span>中风险（8-14）</span>
                </div>
                <div class="legend-item low">
                  <span class="legend-color"></span>
                  <span>低风险（<8）</span>
                </div>
              </div>
            </div>
          </el-card>

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>风险类别分布</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    风险类别分布饼图
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>风险趋势分析</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    风险趋势折线图
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- 控制措施 -->
        <el-tab-pane label="控制措施" name="control">
          <el-button type="primary" icon="Plus" @click="showControlDialog = true" style="margin-bottom: 15px">
            添加控制措施
          </el-button>

          <el-table :data="controlMeasures" stripe>
            <el-table-column prop="riskName" label="风险名称" width="180" />
            <el-table-column prop="controlType" label="控制类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ getControlTypeText(row.controlType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="measure" label="控制措施" min-width="200" show-overflow-tooltip />
            <el-table-column prop="responsible" label="责任人" width="100" />
            <el-table-column prop="deadline" label="完成期限" width="120" />
            <el-table-column prop="progress" label="实施进度" width="150" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.progress" />
              </template>
            </el-table-column>
            <el-table-column prop="effectiveness" label="有效性" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getEffectivenessType(row.effectiveness)">
                  {{ row.effectiveness }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewMeasureDetail(row)">详情</el-button>
                <el-button link type="success" @click="updateMeasureProgress(row)">更新进度</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 风险预警 -->
        <el-tab-pane label="风险预警" name="alert">
          <el-alert
            title="风险预警规则"
            type="info"
            :closable="false"
            style="margin-bottom: 20px"
          >
            系统会根据风险值自动触发预警：高风险（≥15）红色预警，中风险（8-14）橙色预警
          </el-alert>

          <el-table :data="alertList" stripe>
            <el-table-column prop="alertTime" label="预警时间" width="180" />
            <el-table-column prop="riskName" label="风险名称" width="200" />
            <el-table-column prop="alertLevel" label="预警级别" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getAlertLevelType(row.alertLevel)" size="large">
                  {{ row.alertLevel }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="alertReason" label="预警原因" min-width="200" show-overflow-tooltip />
            <el-table-column prop="suggestion" label="处理建议" min-width="200" show-overflow-tooltip />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === '已处理' ? 'success' : 'warning'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewAlertDetail(row)">详情</el-button>
                <el-button link type="success" @click="handleAlert(row)">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 应急预案 -->
        <el-tab-pane label="应急预案" name="contingency">
          <el-button type="primary" icon="Plus" @click="showPlanDialog = true" style="margin-bottom: 15px">
            创建预案
          </el-button>

          <el-table :data="contingencyPlans" stripe>
            <el-table-column prop="planName" label="预案名称" width="200" />
            <el-table-column prop="planType" label="预案类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.planType }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="triggerCondition" label="触发条件" min-width="200" show-overflow-tooltip />
            <el-table-column prop="responseTime" label="响应时间" width="120" />
            <el-table-column prop="responsible" label="负责人" width="100" />
            <el-table-column prop="drillCount" label="演练次数" width="100" align="center" />
            <el-table-column prop="lastDrillDate" label="最近演练" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === '有效' ? 'success' : 'info'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewPlan(row)">查看</el-button>
                <el-button link type="success" @click="drillPlan(row)">演练</el-button>
                <el-button link type="warning" @click="editPlan(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 新增风险对话框 -->
    <el-dialog v-model="showRiskDialog" title="新增风险" width="700px">
      <el-form :model="riskForm" :rules="rules" ref="riskFormRef" label-width="100px">
        <el-form-item label="风险名称" prop="riskName">
          <el-input v-model="riskForm.riskName" placeholder="请输入风险名称" />
        </el-form-item>
        <el-form-item label="风险类别" prop="category">
          <el-select v-model="riskForm.category" placeholder="请选择类别">
            <el-option label="财务风险" value="financial" />
            <el-option label="运营风险" value="operational" />
            <el-option label="市场风险" value="market" />
            <el-option label="合规风险" value="compliance" />
            <el-option label="技术风险" value="technical" />
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发生概率" prop="probability">
              <el-slider v-model="riskForm.probability" :marks="{ 0: '0%', 50: '50%', 100: '100%' }" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="影响程度" prop="impact">
              <el-rate v-model="riskForm.impact" :max="5" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="风险描述" prop="description">
          <el-input
            v-model="riskForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入风险描述"
          />
        </el-form-item>
        <el-form-item label="潜在后果">
          <el-input
            v-model="riskForm.consequence"
            type="textarea"
            :rows="3"
            placeholder="请输入潜在后果"
          />
        </el-form-item>
        <el-form-item label="责任人" prop="owner">
          <el-input v-model="riskForm.owner" placeholder="请输入责任人" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showRiskDialog = false">取消</el-button>
        <el-button type="primary" @click="handleRiskSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 添加控制措施对话框 -->
    <el-dialog v-model="showControlDialog" title="添加控制措施" width="600px">
      <el-form :model="controlForm" label-width="100px">
        <el-form-item label="关联风险">
          <el-select v-model="controlForm.riskId" placeholder="请选择风险" filterable>
            <el-option
              v-for="risk in riskList"
              :key="risk.id"
              :label="risk.riskName"
              :value="risk.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="控制类型">
          <el-select v-model="controlForm.controlType" placeholder="请选择类型">
            <el-option label="预防性控制" value="preventive" />
            <el-option label="检测性控制" value="detective" />
            <el-option label="纠正性控制" value="corrective" />
          </el-select>
        </el-form-item>
        <el-form-item label="控制措施">
          <el-input
            v-model="controlForm.measure"
            type="textarea"
            :rows="4"
            placeholder="请输入控制措施"
          />
        </el-form-item>
        <el-form-item label="责任人">
          <el-input v-model="controlForm.responsible" placeholder="请输入责任人" />
        </el-form-item>
        <el-form-item label="完成期限">
          <el-date-picker
            v-model="controlForm.deadline"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showControlDialog = false">取消</el-button>
        <el-button type="primary" @click="handleControlSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 创建预案对话框 -->
    <el-dialog v-model="showPlanDialog" title="创建应急预案" width="700px">
      <el-form :model="planForm" label-width="100px">
        <el-form-item label="预案名称">
          <el-input v-model="planForm.planName" placeholder="请输入预案名称" />
        </el-form-item>
        <el-form-item label="预案类型">
          <el-select v-model="planForm.planType" placeholder="请选择类型">
            <el-option label="系统故障" value="system" />
            <el-option label="数据泄露" value="data" />
            <el-option label="安全事故" value="security" />
            <el-option label="自然灾害" value="disaster" />
          </el-select>
        </el-form-item>
        <el-form-item label="触发条件">
          <el-input
            v-model="planForm.triggerCondition"
            type="textarea"
            :rows="3"
            placeholder="请输入触发条件"
          />
        </el-form-item>
        <el-form-item label="应对措施">
          <el-input
            v-model="planForm.responseMeasure"
            type="textarea"
            :rows="5"
            placeholder="请输入应对措施"
          />
        </el-form-item>
        <el-form-item label="响应时间">
          <el-input v-model="planForm.responseTime" placeholder="如：30分钟内" />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="planForm.responsible" placeholder="请输入负责人" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPlanDialog = false">取消</el-button>
        <el-button type="primary" @click="handlePlanSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 统计数据
const stats = reactive({
  totalRisks: 45,
  criticalRisks: 8,
  mediumRisks: 22,
  controlledRisks: 15
})

// 当前标签页
const activeTab = ref('list')

// 筛选表单
const filterForm = reactive({
  category: '',
  level: '',
  status: ''
})

// 风险列表
const riskList = ref([
  {
    id: 1,
    riskNo: 'RISK-2025-001',
    riskName: '客户集中度过高风险',
    category: 'financial',
    level: 'high',
    probability: 75,
    impact: 4,
    riskScore: 15,
    owner: '张经理',
    status: 'controlling'
  },
  {
    id: 2,
    riskNo: 'RISK-2025-002',
    riskName: '供应链中断风险',
    category: 'operational',
    level: 'medium',
    probability: 45,
    impact: 3,
    riskScore: 9,
    owner: '李主管',
    status: 'controlling'
  },
  {
    id: 3,
    riskNo: 'RISK-2025-003',
    riskName: '数据安全风险',
    category: 'technical',
    level: 'high',
    probability: 60,
    impact: 5,
    riskScore: 18,
    owner: '王工程师',
    status: 'assessing'
  }
])

// 控制措施列表
const controlMeasures = ref([
  {
    id: 1,
    riskName: '客户集中度过高风险',
    controlType: 'preventive',
    measure: '拓展新客户，降低对大客户依赖；建立客户储备池',
    responsible: '张经理',
    deadline: '2025-06-30',
    progress: 60,
    effectiveness: '有效'
  },
  {
    id: 2,
    riskName: '供应链中断风险',
    controlType: 'preventive',
    measure: '建立备用供应商体系；增加安全库存',
    responsible: '李主管',
    deadline: '2025-03-31',
    progress: 75,
    effectiveness: '有效'
  }
])

// 预警列表
const alertList = ref([
  {
    id: 1,
    alertTime: '2025-01-13 09:30',
    riskName: '数据安全风险',
    alertLevel: '红色预警',
    alertReason: '检测到异常访问行为，风险值升至18',
    suggestion: '立即启动安全检查，加强访问控制',
    status: '待处理'
  },
  {
    id: 2,
    alertTime: '2025-01-12 14:20',
    riskName: '客户集中度过高风险',
    alertLevel: '红色预警',
    alertReason: 'TOP3客户占比达到65%，超过安全阈值',
    suggestion: '加快新客户开发，降低客户集中度',
    status: '处理中'
  }
])

// 应急预案列表
const contingencyPlans = ref([
  {
    id: 1,
    planName: '系统故障应急预案',
    planType: '系统故障',
    triggerCondition: '系统宕机或关键功能不可用',
    responseTime: '30分钟内',
    responsible: '技术部',
    drillCount: 3,
    lastDrillDate: '2024-12-15',
    status: '有效'
  },
  {
    id: 2,
    planName: '数据泄露应急预案',
    planType: '数据泄露',
    triggerCondition: '发现数据泄露或安全漏洞',
    responseTime: '1小时内',
    responsible: '安全部',
    drillCount: 2,
    lastDrillDate: '2024-11-20',
    status: '有效'
  }
])

// 对话框
const showRiskDialog = ref(false)
const showControlDialog = ref(false)
const showPlanDialog = ref(false)
const riskFormRef = ref(null)

// 表单
const riskForm = reactive({
  riskName: '',
  category: '',
  probability: 50,
  impact: 3,
  description: '',
  consequence: '',
  owner: ''
})

const controlForm = reactive({
  riskId: '',
  controlType: '',
  measure: '',
  responsible: '',
  deadline: ''
})

const planForm = reactive({
  planName: '',
  planType: '',
  triggerCondition: '',
  responseMeasure: '',
  responseTime: '',
  responsible: ''
})

// 表单验证规则
const rules = {
  riskName: [{ required: true, message: '请输入风险名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择风险类别', trigger: 'change' }],
  owner: [{ required: true, message: '请输入责任人', trigger: 'blur' }]
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 计算风险值
const calculateRiskScore = (probability, impact) => {
  return Math.round((probability / 20) * impact)
}

// 方法
const getCategoryText = (category) => {
  const texts = {
    financial: '财务风险',
    operational: '运营风险',
    market: '市场风险',
    compliance: '合规风险',
    technical: '技术风险'
  }
  return texts[category] || category
}

const getLevelType = (level) => {
  const types = {
    high: 'danger',
    medium: 'warning',
    low: 'success'
  }
  return types[level] || 'info'
}

const getLevelText = (level) => {
  const texts = {
    high: '高风险',
    medium: '中风险',
    low: '低风险'
  }
  return texts[level] || level
}

const getScoreType = (score) => {
  if (score >= 15) return 'danger'
  if (score >= 8) return 'warning'
  return 'success'
}

const getStatusType = (status) => {
  const types = {
    identified: 'info',
    assessing: 'primary',
    controlling: 'warning',
    controlled: 'success'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    identified: '识别',
    assessing: '评估中',
    controlling: '控制中',
    controlled: '已控制'
  }
  return texts[status] || status
}

const getControlTypeText = (type) => {
  const texts = {
    preventive: '预防性控制',
    detective: '检测性控制',
    corrective: '纠正性控制'
  }
  return texts[type] || type
}

const getEffectivenessType = (effectiveness) => {
  const types = {
    '有效': 'success',
    '部分有效': 'warning',
    '无效': 'danger'
  }
  return types[effectiveness] || 'info'
}

const getAlertLevelType = (level) => {
  const types = {
    '红色预警': 'danger',
    '橙色预警': 'warning',
    '黄色预警': 'info'
  }
  return types[level] || 'info'
}

const getRiskMatrixClass = (row, col) => {
  const score = (6 - row) * col
  if (score >= 15) return 'high-risk'
  if (score >= 8) return 'medium-risk'
  return 'low-risk'
}

const getRiskCount = (row, col) => {
  // 模拟数据
  return Math.floor(Math.random() * 5)
}

const handleTabClick = (tab) => {
  console.log('切换标签页', tab.props.name)
}

const handleSearch = () => {
  console.log('搜索', filterForm)
  ElMessage.success('搜索成功')
}

const handleReset = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  ElMessage.success('重置成功')
}

const viewDetail = (row) => {
  console.log('查看详情', row)
  ElMessage.info('查看风险详情')
}

const assess = (row) => {
  console.log('评估风险', row)
  ElMessage.success('风险评估完成')
}

const control = (row) => {
  console.log('控制风险', row)
  controlForm.riskId = row.id
  showControlDialog.value = true
}

const monitor = (row) => {
  console.log('监控风险', row)
  ElMessage.info('风险监控中')
}

const viewMeasureDetail = (row) => {
  console.log('查看措施详情', row)
  ElMessage.info('查看控制措施详情')
}

const updateMeasureProgress = (row) => {
  console.log('更新进度', row)
  ElMessage.success('进度更新成功')
}

const viewAlertDetail = (row) => {
  console.log('查看预警详情', row)
  ElMessage.info('查看预警详情')
}

const handleAlert = (row) => {
  console.log('处理预警', row)
  ElMessage.success('预警已处理')
}

const viewPlan = (row) => {
  console.log('查看预案', row)
  ElMessage.info('查看应急预案')
}

const drillPlan = (row) => {
  console.log('演练预案', row)
  ElMessage.success('应急演练已启动')
}

const editPlan = (row) => {
  Object.assign(planForm, row)
  showPlanDialog.value = true
}

const handleRiskSubmit = () => {
  riskFormRef.value.validate((valid) => {
    if (valid) {
      // 计算风险值
      const riskScore = calculateRiskScore(riskForm.probability, riskForm.impact)
      console.log('提交风险', riskForm, '风险值:', riskScore)
      ElMessage.success('风险添加成功')
      showRiskDialog.value = false
    }
  })
}

const handleControlSubmit = () => {
  console.log('提交控制措施', controlForm)
  ElMessage.success('控制措施添加成功')
  showControlDialog.value = false
}

const handlePlanSubmit = () => {
  console.log('提交应急预案', planForm)
  ElMessage.success('应急预案创建成功')
  showPlanDialog.value = false
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped lang="scss">
.risk-management-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

.main-card {
  .filter-form {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .chart-container {
    height: 300px;
  }
}

.risk-matrix {
  padding: 20px;

  .matrix-container {
    margin-bottom: 20px;
  }

  .matrix-header {
    text-align: center;
    margin-bottom: 10px;

    .matrix-title {
      font-weight: bold;
      color: #303133;
    }
  }

  .matrix-body {
    display: flex;
    gap: 10px;

    .matrix-y-axis {
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #303133;

      div {
        transform: rotate(-90deg);
        white-space: nowrap;
      }
    }

    .matrix-grid {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;

      .matrix-row {
        display: flex;
        gap: 5px;

        .matrix-cell {
          flex: 1;
          height: 80px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
          }

          .cell-content {
            text-align: center;

            .cell-score {
              font-size: 20px;
              font-weight: bold;
              margin-bottom: 5px;
            }

            .cell-count {
              font-size: 12px;
              color: #909399;
            }
          }

          &.high-risk {
            background: #fef0f0;
            border-color: #f56c6c;

            .cell-score {
              color: #f56c6c;
            }
          }

          &.medium-risk {
            background: #fdf6ec;
            border-color: #e6a23c;

            .cell-score {
              color: #e6a23c;
            }
          }

          &.low-risk {
            background: #f0f9ff;
            border-color: #67c23a;

            .cell-score {
              color: #67c23a;
            }
          }
        }
      }
    }
  }

  .matrix-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;

      .legend-color {
        width: 20px;
        height: 20px;
        border-radius: 4px;
      }

      &.high .legend-color {
        background: #f56c6c;
      }

      &.medium .legend-color {
        background: #e6a23c;
      }

      &.low .legend-color {
        background: #67c23a;
      }
    }
  }
}
</style>

